<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 文章列表页面：展示多个文章的基础信息
// 简化：使用本地模拟数据，初学者先理解数据-视图绑定

// 模拟的文章数据（真实项目会从服务端获取）
const posts = ref([
  { id: 1, title: 'Vue 入门指南', summary: '从零开始理解 Vue 的核心概念。' },
  { id: 2, title: '组件化与模块化', summary: '如何用组件组织你的前端代码。' },
  { id: 3, title: '路由与导航', summary: '用 vue-router 管理页面之间的跳转。' },
])

const router = useRouter()

// 点击卡片跳转到详情页
function goDetail(id) {
  // 参数校验：确保 id 是数字或字符串
  if (id === undefined || id === null) return
  router.push(`/posts/${id}`)
}

// 生命周期：组件挂载时可以做初始化，如请求数据
onMounted(() => {
  // 这里暂时不做网络请求，保留示例结构
})
</script>

<template>
  <section class="page">
    <h2 class="title">文章列表</h2>
    <ul class="list">
      <li v-for="post in posts" :key="post.id" class="item" @click="goDetail(post.id)">
        <h3 class="item-title">{{ post.title }}</h3>
        <p class="item-summary">{{ post.summary }}</p>
      </li>
    </ul>
  </section>
</template>

<style scoped>
.page { padding: 24px; }
.title { font-size: 22px; margin: 0 0 12px; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.item { padding: 12px; border: 1px solid #eee; border-radius: 8px; cursor: pointer; }
.item:hover { border-color: #42b883; }
.item-title { margin: 0 0 8px; font-size: 18px; }
.item-summary { margin: 0; color: #666; }
</style>

<!--
学习笔记（b.2）：
- 目标：学会 v-for 列表渲染、@click 事件、useRouter 跳转
- 核心代码：
  - <li v-for="post in posts" :key="post.id" @click="goDetail(post.id)">
    - v-for：循环渲染数组
    - :key：唯一标识，提升渲染性能与稳定性
    - @click：点击触发 goDetail 函数
  - goDetail：里头调用 router.push(`/posts/${id}`) 跳转到详情页
- 练习建议：把 posts 改成从 localStorage 读取；添加“新建文章”按钮
-->